<div class="el-dialog__wrapper" [@dialogFadeAnimation]="visible" [ngStyle]="{ 'z-index': dialogZindex }"
    (click)="wrapperClickHandle()">
    <div [class]="'el-dialog ' + customClass" [class.el-dialog--center]="center" [style]="makeDialogStyles()"
        (click)="$event.stopPropagation()">
        <div class="el-dialog__header">
            <ng-container *ngIf="titleTmp">
                <ng-template [ngTemplateOutlet]="titleTmp"></ng-template>
            </ng-container> <span class="el-dialog__title" *ngIf="!titleTmp">{{title}}</span> <button type="button"
                class="el-dialog__headerbtn" aria-label="Close" *ngIf="showClose" (click)="closeHandler()"> <i
                    class="el-dialog__close el-icon el-icon-close"></i> </button>
        </div>
        <div class="el-dialog__body">
            <ng-content></ng-content>
        </div>
        <div class="el-dialog__footer">
            <ng-container *ngIf="footerTmp">
                <ng-template [ngTemplateOutlet]="footerTmp"></ng-template>
            </ng-container>
        </div>
    </div>
</div>